📡 이벤트 전파와 기본동작 제어

React/JS에서는 이벤트가 발생했을 때 DOM 트리를 따라 전달되고, 그 전파를 막거나 이벤트 기본 동작을 제어할 수 있습니다.

1️⃣ 이벤트 전파 (Event propagation) 이해

이벤트가 발생하면 DOM 트리를 따라 상위/하위 요소로 전달됩니다.

🔹 전파 단계

💡 브라우저 기본 동작은 버블링 단계에서 이벤트가 상위 요소로 전달됩니다.

2️⃣ 이벤트 전파 막기

stopPropagation()

• 이벤트가 상위/하위 요소로 더 이상 전달되지 않도록 막음

🧐 예제

function EventExample() {
  const handleParentClick = () => console.log("부모 클릭");
  const handleChildClick = (e: React.MouseEvent) => {
    e.stopPropagation();
    console.log("자식 클릭");
  };

  return (
    <div onClick={handleParentClick} style={{ padding: "20px", background: "#f0f0f0" }}>
      부모
      <button onClick={handleChildClick}>자식 버튼</button>
    </div>
  );
}

• 버튼 클릭 시 부모 이벤트는 실행되지 않음

3️⃣ 이벤트 기본동작 막기

🔹preventDefault()

• 링크 이동, 폼 제출 등 브라우저 기본 동작을 막음

🧐 예제

function LinkExample() {
  const handleClick = (e: React.MouseEvent) => {
    e.preventDefault(); // 링크 이동 막기
    console.log("링크 클릭, 이동 안 함");
  };

  return <a href="https://google.com" onClick={handleClick}>구글 이동</a>;
}

• 링크 클릭 시 브라우저 기본 이동 동작이 발생하지 않음